@extends('layouts.app')

@section('title', '首页')

@section('style')
    <link rel="stylesheet" href="{{ asset('statics/css/jquery.jMosaic.css') }}">
    <style type="text/css">
        .wrapper pre {font: normal 87.5%/1.2em monospace, sans-serif; padding: 15px 30px 0px 30px; margin: 0; background: #eee; border-radius: 3px; display: block; overflow: auto;}

        .blocks {margin: 0px auto; width: 70%; padding: 0;}
        .blocks li{
            list-style: none;
        }
        .blocks img{
            height:100%
        }
        .mask{
            width: 100%;
            height:100%;
            display: none;
            position:absolute;
            top:0;
            left: 0;
            background-color: rgba(0,0,0,0.7);
            color:#fff;
            margin:0 auto;
        }
        .mask h4{
            width:100%;
            font-size:22px;
            font-weight: normal;
            text-align: center;
            display: inline-block;

            padding:0 30px;
            box-sizing: border-box;
            position: absolute;
            bottom: 30px;
        }
    </style>
@stop

@section('header')
    @include('layouts.header-one')
@stop


@section('content')
<section class="hero-unit clearfix">
    <div id="carousel" class="carousel slide" data-ride="carousel" data-interval="5000" data-pause="null">
        <ol class="carousel-indicators">
            @for($i = 0; $i < count($slideshows); $i++)
            <li data-target="#carousel" data-slide-to="{{ $i }}" @if($i == 0) class="active" @endif></li>
            @endfor
        </ol>
        <div class="carousel-inner">
            @foreach($slideshows as $key => $slideshow)
                <a class="item @if($key == 0) active @endif" href="{{ $slideshow->link }}">
                    <img src="{{ asset('uploads/' . $slideshow->url) }}" alt="{{ $slideshow->link }}" />
                </a>
            @endforeach
        </div>
        <a class="left carousel-control" href="#carousel" data-slide="prev" role="button">
            <i class="carousel-icon-left"></i>
        </a>
        <a class="right carousel-control" href="#carousel" data-slide="next" role="button">
            <i class="carousel-icon-right"></i>
        </a>
    </div>
</section>
<section class="new-recommend">
    <div class="title">
        <h3>新品推荐</h3>
        <p>NEW RELEASES</p>
        <div class="line1"></div>
    </div>
    <div class="new-recommend-inner">
        <div class="container">
            <div class="row-fluid">
                <div id="myCarousel" class="carousel slide" data-ride="myCarousel"  data-interval="5000">
                    <ol class="carousel-indicators">
                        @for($i = 0; $i < ceil(count($recommends) / 4); $i++)
                            <li data-target="#myCarousel" data-slide-to="{{ $i }}" @if($i == 0) class="active" @endif></li>
                        @endfor
                    </ol>
                    <div class="carousel-inner">
                        @foreach($recommends as $key => $recommend)
                            @if($key % 4 == 0)
                                <div class="item @if($key == 0) active @endif">
                                    <ul class="row">
                            @endif
                                        <li class="span4 col-md-3">
                                            <div class="thumbnail">
                                                @if($recommend->product->is_new)
                                                <div class="hy-icon-new">
                                                    <img src="{{ asset('statics/images/icon_new_tap_allpage.png') }}">
                                                </div>
                                                @endif
                                                <img src="@if($recommend->product->cover) {{ asset('uploads/' . $recommend->product->cover[0]) }} @endif" alt="">
                                                <div class="myCarousel-caption">
                                                    <div class="bg1"></div>
                                                    <a target="_blank" href="{{ route('productInfo', ['uuid' => $recommend->product->uuid]) }}">
                                                        <h4>{{ $recommend->product->name }}</h4>
                                                        <div class="line2"></div>
                                                        <p>{{ $recommend->product->summary }}</p>
                                                    </a>
                                                </div>
                                            </div>
                                        </li>
                            @if($key % 4 == 3)
                                    </ul>
                                </div>
                            @endif
                        @endforeach
                    </div>
                </div>
                <div class="control-box">
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev" role="button">
                        <i class="mycarousel-icon-left"></i>
                    </a>
                    <a class="right carousel-control" href="#myCarousel" data-slide="next" role="button">
                        <i class="mycarousel-icon-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</section>
<section class="hot-sale">
    <div class="title">
        <h3>畅销书榜</h3>
        <p>BEST SELLERS</p>
        <div class="line1"></div>
    </div>
    <div class="hot-sale-tab">
        <div class="container">
            <ul class="nav nav-tabs" role="tablist">
                @foreach($bestSellersCategories as $key => $bestSellersCategory)
                <li role="presentation" @if($key == 0)class="active" @endif>
                    <a href="#{{ $bestSellersCategory->sort }}" aria-controls="{{ $bestSellersCategory->sort }}" role="tab" data-toggle="tab">{{ $bestSellersCategory->title }}</a>
                    <span class="line6"></span>
                </li>
                @endforeach
            </ul>
            <div class="tab-content">
                @foreach($bestSellersCategories as $key => $bestSellersCategory)
                <div role="tabpanel" class="tab-pane @if($key == 0) active @endif " id="{{ $bestSellersCategory->sort }}">
                    <div class="row">
                        @foreach($bestSellersCategory->bestSellers as $k => $product)
                        <div class="col-md-4">
                            <a target="_blank" href="{{ route('productInfo', ['uuid' => $product->uuid]) }}" class="hot-sale-inside">
                                <div class="hot-sale-inside-l">
                                    <h4>{{ $product->name }}</h4>
                                    <div class="line3"></div>
                                    <p>{{ $product->summary }}</p>
                                </div>
                                <div class="r-tab">
                                    <div class=" hot-sale-inside-r">
                                        @if($product->is_new)
                                        <div class="hy-icon-new">
                                            <img src="{{ asset('statics/images/icon_new_tap_allpage.png') }}">
                                        </div>
                                        @endif
                                        <img src="@if($product->cover){{ asset('uploads/' . $product->cover[0]) }} @endif" alt="" />
                                    </div>
                                </div>
                            </a>
                        </div>
                        @endforeach
                    </div>
                </div>
                @endforeach
            </div>
        </div>
    </div>
</section>
<section class="publish-trade">
    <div class="container">
        <div class="publish-trade-inner">
            <div class="row">
                <div class="col-md-4">
                    <div class="publish-trade-title">
                        <div class="title">
                            <h3>版权贸易</h3>
                            <p>copyright bussiness</p>
                            <div class="line1"></div>
                        </div>
                        <a href="{{ route('enIndex') }}" class="more">more<i></i></a>
                    </div>
                </div>
                @foreach($trades as $key => $trade)
                <div class="col-md-4">
                    <a target="_blank" href="{{ route('productInfo', ['uuid' => $trade->uuid]) }}" class="hot-sale-inside {{ 'publish-trade-bg-' . ($key + 1) }}">
                        <div class="hot-sale-inside-l">
                            <h4>{{ str_limit($trade->name, 30, '...') }}</h4>
                            <div class="line3"></div>
                            <p>{{ $trade->summary }}</p>
                        </div>
                        <div class="r-tab">
                            <div class=" hot-sale-inside-r">
                                @if($trade->is_new)
                                <div class="hy-icon-new">
                                    <img src="{{ asset('statics/images/icon_new_tap_allpage.png') }}">
                                </div>
                                @endif
                                <img src="@if($trade->cover) {{ asset('uploads/' . $trade->cover[0]) }} @endif" alt="">
                            </div>
                        </div>
                    </a>
                </div>
                @endforeach
                </div>
            </div>
        </div>
    </div>
</section>
<div class="hot-topic">
    <div class="title1"><span class="sr-only">热门专题</span></div>
    <div class="container">
        <div class="hot-topic-inner">
            <div class="row">
                @foreach($topics as $k => $topic)
                    <div class="col-md-4">
                        <a href="{{ $topic->url }}" target="_blank" class="clearfix">
                            <div class="hot-topic-img">
                                <img src="{{ asset('uploads/' . $topic->image) }}" alt="" />
                            </div>
                            <div class="hot-topic-tab">
                                <h4>&nbsp;</h4>
                                <h5>{{ $topic->title }}</h5>
                                <div class="line4"></div>
                                <p>{{ $topic->summary }}</p>
                            </div>
                        </a>
                    </div>
                @endforeach
            </div>
        </div>
    </div>
</div>
<section class="activity-display">
    <div class="title2"><a href="{{ route('activity') }}"><span class="hy-icon-index-more">more<i></i></span></a> </div>
    <div class="htmleaf-container">
        <div class="htmleaf-content bgcolor-8">
            <ul class="blocks">
                @foreach($activities as $k => $activity)
                    <li>
                        <a target="_blank" href="@if(isset($activity['url'])) {{ $activity['url'] }} @endif">
                            <img src="{{ '/uploads/' . $activity['image'] }}">
                            <div class="mask">
                                <h4>@if(isset($activity['title'])) {{ $activity['title'] }} @endif</h4>
                            </div>
                        </a>
                    </li>
                @endforeach
            </ul>
        </div>
    </div>
</section>
<section class="apps">
    <div class="container">
        <div class="row">
            <div class="col-md-6 apps_1 clearfix">
                <div class="apps-tleft">
                    <h4>海燕乐童</h4>
                    <p class="subtitle">以儿童美育为特色，集图书、音频、视频内容为一体，分享亲子教育、艺术鉴赏、儿童阅读等方面的内容。</p>
                    <div class="apps-tleft-tab clearfix">
                        <div class="apps-tleft-tab-inner icon_1"></div>
                        <div class="apps-tleft-tab-inner icon_2"></div>
                        <div class="apps-tleft-tab-inner icon_3">
                            <img src="{{ asset('statics/images/icon_letong_wxqr.jpg') }}" alt="乐童" />
                        </div>
                    </div>
                </div>
                <div class="apps-tright">
                    <img src="{{ asset('statics/images/icon_letong_wx_index.png') }}" style="height: 224px" alt="" />
                </div>
            </div>
            <div class="col-md-6 apps_2 clearfix">
                <div class="apps-tleft">
                    <div class="stars clearfix">
                        <img src="{{ asset('statics/images/icon_logo_introduce.jpg') }}" alt="星星亮" />
                        <div class="stars-content">
                            <p class="p1">星星亮</p>
                            <p class="p2">微信号：xingxingliang123</p>
                        </div>
                    </div>
                    <p class="introduce">功能介绍：以轻松、简洁的形式，向大众普及孤独症相关知识，为孤独症家长、社工提供有效的信息及援助</p>
                    <img class="stars-wechat" src="{{ asset('statics/images/icon_star_qrcode.png') }}" alt="星星亮" />
                </div>
                <div class="apps-tright">
                    <img src="{{ asset('statics/images/icon_phone_introduce.png') }}" alt="" />
                </div>
            </div>
            <div class="col-md-6 apps_3 clearfix">
                <div class="apps-tleft">
                    <div class="stars clearfix">
                        <img src="{{ asset('statics/images/icon_logo_introduce_2.png') }}" alt="精灵童书" />
                        <div class="stars-content">
                            <p class="p1">精灵童书</p>
                            <p class="p2">微信号：jinglingtongshu</p>
                        </div>
                    </div>
                    <p class="introduce">功能介绍：精灵童书公众号，专注童书及援助</p>
                    <img class="stars-wechat" src="{{ asset('statics/images/icon_tushu_qrcode.png') }}" alt="精灵童书" />
                </div>
                <div class="apps-tright">
                    <img src="{{ asset('statics/images/icon_phone_introduce_2.png') }}" alt="" />
                </div>
            </div>
        </div>
    </div>
</section>
<section class="about-us">
    <div class="decorate-bg1"></div>
    <div class="about-us-inner">
        <div class="about-us-tit"><span class="sr-only">关于我们，乐在阅读</span></div>
        <div class="container">
            <div class="about-us-content" style="text-indent: 2em">
                <p>广东海燕电子音像出版社、广东语言音像电子出版社分别成立于1996年和1983年，两社于2006年进行整合，现为南方出版传媒股份有限公司子公司，我社将继续积极探索并建立全媒体出版的经营模式，专注出版流程改造与发展业态创新，力争出版一流的读物，培养一流的队伍，提供一流的服务，创造一流的效益，努力为广大读者奉献更多更好的精品佳作。</p>
            </div>
        </div>
    </div>
    <div class="decorate-bg2"></div>
</section>
@stop

@section('footer')
    @include('layouts.footer')
@stop

@section('script')
    <script src="{{ asset('statics/js/jquery.jMosaic.js') }}"></script>
    <script>
        // //--------------------控制首页banner满屏显示--------------------//
        // $('.hero-unit .carousel-inner').css({'height': (($(window).height()))+'px'});
        // $(window).resize(function(){
        //     $('.hero-unit .carousel-inner').css({'height': (($(window).height()))+'px'});
        // });

        //--------------------首页所有轮播--------------------//
        $('.carousel').carousel({})

        $(window).load(function() {
            $('.blocks').jMosaic({items_type: "li", min_row_height: 300, margin: 3});
            $(".blocks li").on("mouseover",function(){
                $(this).find(".mask").show();
            })
            $(".blocks li").on("mouseout",function(){
                $(this).find(".mask").hide();
            })
            //$('.pictures').jMosaic({min_row_height: 150, margin: 3, is_first_big: true});
        });

        //You can update on $(window).resize
        $(window).resize(function() {
            $('.blocks').jMosaic({items_type: "li", min_row_height: 350, margin: 3});
        });
    </script>
@stop
